"use client";

import Link from "next/link";
import { Home, ArrowLeft } from "lucide-react";
import { useRouter } from "next/navigation";

export default function NotFound() {
  const router = useRouter();

  return (
    <div className="min-h-[calc(100vh-4rem)] flex items-center justify-center">
      <div className="container flex flex-col items-center justify-center gap-8 px-4 py-16 ">
        <div className="flex flex-col items-center gap-4 text-center">
          <div className="space-y-2">
            <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl">
              404
            </h1>
            <h2 className="text-2xl font-semibold tracking-tight">
              页面未找到
            </h2>
          </div>
          <p className="max-w-[600px] text-muted-foreground">
            抱歉，您访问的页面不存在。可能是链接已过期，或者您输入的地址有误。
          </p>
        </div>

        {/* 404 图标动画 */}
        <div className="relative w-48 h-48">
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-32 h-32 rounded-full border-4 border-primary animate-pulse" />
          </div>
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="text-6xl font-bold text-primary opacity-20">
              404
            </div>
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="flex flex-col sm:flex-row gap-4">
          <Link
            href="/"
            className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            <Home className="mr-2 h-4 w-4" />
            返回首页
          </Link>
          <button
            onClick={() => router.back()}
            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-8 py-3 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
          >
            <ArrowLeft className="mr-2 h-4 w-4" />
            返回上页
          </button>
        </div>

        {/* 建议链接 */}
        <div className="mt-8">
          <h3 className="text-lg font-semibold mb-4">您可能想要访问：</h3>
          <div className="flex flex-wrap justify-center gap-4">
            <Link href="/health" className="text-primary hover:underline">
              健康数据
            </Link>
            <Link href="/mood" className="text-primary hover:underline">
              心情记录
            </Link>
            <Link href="/memo" className="text-primary hover:underline">
              心路笔记
            </Link>
            <Link href="/devices" className="text-primary hover:underline">
              设备管理
            </Link>
          </div>
        </div>

        {/* 帮助提示 */}
        <div className="text-sm text-muted-foreground text-center mt-8">
          如果您认为这是一个错误，请
          <Link href="/contact" className="text-primary hover:underline mx-1">
            联系我们
          </Link>
          获取帮助
        </div>
      </div>
    </div>
  );
}
